<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素内容只能修改一次</title>
</head>
<body>
<div id="change" class="change">
  <h1 data-once="info" style="background-color: red"></h1>
</div>

<script>
  let info = 'Hello, Vue'

  function modify_element_content() {
      let element = document.querySelector("#change > h1");

      let attribute = element.getAttribute('data-once');
      if (attribute !== null) {
          element.innerText = eval(attribute)
          // 将属性删除
          element.removeAttribute('data-once')
      }

  }

  modify_element_content()

  info = "Hello, World!"
  modify_element_content()
  info = "Hello"
  modify_element_content()

</script>
</body>
</html>